<template>

  <el-container class="topTitleBox">
    <div class="topTitleBoxFixPos">
      <div style="margin-top: 2%">
        <div class="paperTitle">
          <p v-show="paperInfo.title !== ''" >{{ paperInfo.title }}</p>
          <p v-show="paperInfo.title === ''" >标题未知</p>
        </div>

        <div class="paperAuthor">
          <p v-show="authors.length<=0">暂无作者信息</p>
          <a v-show="authors.length>0" class="author" v-for="i in authors" @click="jumpToPortalUrl(i.authorId)"> {{i.author}} </a>
        </div>

        <div class="paperInst">
          <p v-show="authors.length<=0">暂无机构信息</p>
          <a v-show="authors.length>0" class="insts" v-for="i in authors" > {{i.affiliation}} </a>
        </div>

        <div class="paperSrc">{{paperSource}}</div>

        <div class="paperOp">
          <detail-op-bar-test :paper="paperInfo"></detail-op-bar-test>
        </div>

        <div class="tabsMenu">
          <el-button :class="getBtnclass(3)" type="default"  icon="el-icon-link" @click="clickAbstract" >摘要与领域</el-button>
          <el-button :class="getBtnclass(1)" type="default"  icon="el-icon-link" @click="clickRef" >参考文献</el-button>
          <el-button :class="getBtnclass(2)" type="default"  icon="el-icon-link" @click="clickQuote">被引</el-button>
        </div>
      </div>
    </div>

  </el-container>

  <div class="paperTabItem">
    <div v-show="menuSelect === 1">
      <detail-bottom-tabs-item :item-list="paperRefs"></detail-bottom-tabs-item>
    </div>

    <div v-show="menuSelect === 2">
      <detail-bottom-tabs-item :item-list="citations"></detail-bottom-tabs-item>
    </div>

    <div v-show="menuSelect === 3">
      <el-card>
        <div class="abstract">
          <p class="boldText">摘要:</p>
          <p class="abstractText">{{paperInfo.abstract_===null ? '暂无摘要信息' : paperInfo.abstract_}}</p>
        </div>

        <div class="abstract">
          <p class="boldText">学科领域：</p>
          <p class="abstractText">{{fieldInfo === ''? '暂无本文学科领域信息' : fieldInfo}}</p>
        </div>

      </el-card>
    </div>
  </div>


</template>

<script>
import DetailOpBar from "@/detail/components/DetailOpBar";
import DetailOpBarTest from "@/detail/components/DetailOpBarTest";
import DetailContentTabs from "@/detail/components/DetailContentTabs";
import DetailBottomTabsItem from "@/detail/components/DetailBottomTabsItem"
import axios from "@/utils/MyAxios";
import qs from "qs";
export default {
  name: "detailContentTest",

  data() {
    return {
      paperId: -1,
      institutes: [
        {name: "北京航空航天大学", url: '/school1'},
      ],
      paperKeywords: [
        {name: '关键词1', url:'/key1'},
        {name: '关键词2', url:'/key2'},
      ],

      menuSelect: 3,
      authorRecommend: [],
      citations: [],
      paperRefs: [],

    }
  },
  props: ['paperInfo', 'authors'],
  computed: {
    fieldInfo() {
      let str = this.paperInfo.fields
      let output = ''
      for (let item in str) {
        // console.log(str[item]);
        output += str[item] + ';  '
      }
      return output
    },

    paperSource() {
      // 期刊
      if (this.paperInfo.journal !== null) {
        let date = ''+this.paperInfo.date
        return this.paperInfo.journal+'.'+date.substr(0,4)
      }
      // 会议
      else if (this.paperInfo.conferenceSeries !== null) {
        let interact = this.paperInfo.conferenceInstance
        if (interact === null) {
          return this.paperInfo.conferenceSeries
        }
        else {
          return this.paperInfo.conferenceSeries + ', ' + interact
        }
      }
      else {
        return '暂无文献来源'
      }
    },
  },
  components: {
    DetailContentTabs,
    DetailOpBarTest,
    DetailOpBar,
    DetailBottomTabsItem,
  },
  mounted() {
    this.paperId = this.$route.query.paperId

  },
  methods: {
    jumpToPortalUrl(authorId) {
      const { href } = this.$router.resolve({
        path: '/portal',
        query: {
          authorId: authorId
        }
      });
      window.open(href, '_self')
    },

    getCitation() {
      if (this.citations.length > 0) return

      let data = {
        paperId: this.$route.query.paperId
      }
      axios.post('/api/paper/citation', qs.stringify(data)).then(res => {
        console.log(res);
        if (res.data.code === 0) {
          this.citations = res.data.data
        }
        else {
          '获取被引失败'
        }
      })
    },

    getRef() {
      if (this.paperRefs.length > 0) return

      let data = {
        paperId: this.$route.query.paperId
      }
      axios.post('/api/paper/ref', qs.stringify(data)).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          console.log('获取ref成功');
          this.paperRefs = res.data.data
        }
        else {
          console.log('获取ref失败');
        }
      })
    },


    clickRef() {
      this.menuSelect = 1
      this.getRef()
    },

    clickQuote() {
      this.menuSelect = 2
      this.getCitation()
    },

    clickAbstract() {
      this.menuSelect = 3
    },

    getBtnclass(index) {
      if (this.menuSelect === index){
        return 'opBtnActive'
      }
      else {
        return 'opBtnNotActive'
      }
    }

  },

}
</script>

<style scoped>

.topTitleBox {
  background: linear-gradient(#e4e4e4, white);
  /*border: solid green 1px;*/
}

.topTitleBoxFixPos {
  margin-right: 20%;
  margin-left: 20%;
}



.paperTitle {
  /*border: solid red 1px;*/
  width: 100%;
  /*margin-right: 20%;*/
  /*text-align: left;*/

  font-family: "Times New Roman",serif;
  font-weight: normal;
  font-size: xx-large;
}

.paperAuthor {
  margin-right: 10%;
}

.paperSrc {
  margin-top: 0.5%;

  font-size: medium;
  font-family: "Times New Roman";
  color: rgba(119,119,119,0.89);
}

.paperOp {
  margin-top: 0.5%;
}

.opBtnNotActive ::v-deep {
  --el-button-border-color: #dddddd;
  --el-button-active-border-color: #dddddd;
  --el-button-background-color: #e6e6e6;
}

.opBtnActive {
  --el-button-border-color: #dddddd;
  --el-button-active-border-color: #dddddd;

  --el-button-background-color: #e2ebf5;
  --el-button-font-color: #187ff5;
}

.elMenu ::v-deep {
  --el-menu-item-font-color: red;
  --el-menu-border-color: black;
}

.paperInst {
  margin-right: 20%;
  margin-top: 1%;
}

.tabsMenu {
  margin-top: 2%;
  margin-bottom: 0.2%;
}


.author {
  margin-right: 20px;
  text-align: left;
  font-size: medium;
  cursor: pointer;

}

.paperTabItem {
  margin-left: 20%;
  margin-right: 20%;
}

.insts {
  font-style: oblique;
  margin-right: 20px;
}

.abstractText {
  font-family: "Times New Roman",serif;
  font-size: large;
}

.boldText {
  font-family: "Times New Roman",serif;
  font-size: large;
  font-weight: bold;

}


</style>